<template>
    <div class="container">
        <div class="container-box" v-for="(list) in NewsContainer" :key="list.index" @click="goNewsDetail(list.id,list.name,list.image_url)">
            <div class="container-img">
                <img :src="list.image_url" alt="图片">
            </div>
            <div class="container-title">
                {{list.name}}
                <span class="fr"> 商品{{list.goods_num}}个</span>
            </div>
            <div class="container-con">
                <!-- {{list.newsCon}} -->
            </div>
        </div>
       
    </div>
</template>


<script>
import axios from 'axios';
export default {
    name:"NewsContainer",
      data(){
        return{
            NewsContainer:[]
        }
    },
    created(){
        var _this=this;
        axios.get("/api/common/goodspdd/themes").then(function(res) {
            console.log(res)
           _this.NewsContainer=res.data.theme_list_get_response.theme_list
        })
       
    },
    methods: {
         goNewsDetail:function(id,name,url){
            this.$router.push(
                {path:"zhuantiDetail",
                query:{
                    id:id,
                    name:name,
                    url,url
                    }
                })
        },
         scroll(NewsContainer) {
            let isLoading = false
            window.onscroll = () => {
                // 距离底部200px时加载一次
                let bottomOfWindow = document.documentElement.offsetHeight - document.documentElement.scrollTop - window.innerHeight <= 20
                if (bottomOfWindow && isLoading == false) {
                isLoading = true
                axios.get("/api/common/goodspdd/themes").then(response => {
                NewsContainer.push(response.data.results[0])
                isLoading = false
                })
                }
            }
            }
    },
    mounted() {
        // this.scroll(this.NewsContainer)
    }
}
</script>



<style lang="stylus" scoped>
   .container
        width 100%;
        height 100%
        padding-top 1.15rem
        padding-bottom 1.45rem
        // position absolute
       
        .container-box
            width 100%
            height 5.4rem
            background white
            border-bottom: 1px dotted #CCCCCC;
        .container-title
            color: #505b63
            width: 95%
            margin: auto
            text-align: left
            font-size: 0.3rem
            height: 1.5rem
            line-height: 1rem
        .container-img
            width 95%
            height 4.3rem
            margin auto
            img 
                width 100%
                height 100%
        .container-con
            width 95%;
            margin auto;
            line-height .5rem
            padding-top .3rem
            color #696969
            text-align justify
            font-size .3rem
        .container-time
            width: 95%;
            margin: auto;
            padding-top: .2rem
            font-size .3rem
            color #696969
</style>